<template>
  <div class="rights_view">
    <!-- 页面主体 -->
    <v-main>
      <div class="page_name">
        <span class="title">查看角色</span>
      </div>
      <div class="role_info">
        <div class="role_prop">
          <span class="prop_name">角色名称:</span>
          <span>{{roleRights.roleName}}</span>
          <i class="iconfont official">&#xe607;</i>
        </div>
        <div class="role_prop">
          <span class="prop_name">角色描述:</span>
          <span>{{ roleRights.desc }}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name required">权限:</span>
          <div class="right_tree">
            <el-tree :data="roleRights.rights" :default-expand-all="true"></el-tree>
          </div>
        </div>
        <div class="role_prop">
          <el-button size="mini" @click="navToRights">返回</el-button>
        </div>
      </div>
    </v-main>
  </div>
</template>
<script type="text/ecmascript-6">

// components
import MainComp from '@/components/main'

// element-ui
import { Button, Tree } from 'element-ui'

// permission config===========
import permissionTree from '../permissionTree'

export default {
  name: 'rightsView',

  components: {
    // elementUI component
    elButton: Button,
    elTree: Tree,
    // 项目自定义组件
    vMain: MainComp
  },

  created () {
    // 获取传来的角色
    this.roleRank = this.$route.query.roleRank
    this.tabName = this.$route.query.tabName
  },

  data () {
    return {
      tabName: null,
      roleRank: ''
    }
  },

  computed: {
    roleRights () {
      return permissionTree[this.roleRank]
    }

  },

  methods: {
    navToRights () {
      this.$router.push({
        name: 'Settings',
        query: {
          tabName: this.tabName
        }
      })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .rights_view {
    box-sizing: border-box;
    padding: 20px;
    width: 100;
    background-color: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    .page_name {
      margin-bottom: 20px;
      .title{
        font-weight: bold;
        font-size: 18px;
      }
    }
    .role_info {
      .role_prop:not(:last-child) {
        margin-bottom: 20px;
        .official {
          color: red;
          font-size: 20px;
        }
        .prop_name {
          display: inline-block;
          width: 80px;
          height: 26px;
          margin-right: 10px;
          line-height: 26px;
          text-align: left;
        }
        .required{
          float: left;
        }
        .required::before{
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
        .right_tree{
          display: inline-block;
          width: 300px;
          padding: 10px;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
        }
      }
    }
  }
</style>
